<template>
  <a-select
    :value="value"
    :style="`minWidth: ${width}`"
    placeholder="机型"
    :allow-clear="allowClear"
    :max-tag-count="maxTagCount"
    :mode="mode"
    show-arrow
    @change="(nv)=>{
      changeValueHandler(nv);
      changeData()
    }"
  >
    <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
    <a-select-option v-for="selectItem in dataSourceF" :key="selectItem.id" :value="selectItem.name">
      {{ selectItem.name }}
    </a-select-option>
  </a-select>
</template>

<script>
import { mapState } from 'vuex';
export default {
  model: {
    prop: 'value',
    event: 'changeValueHandler'
  },
  props: {
    mode: {
      type: String,
      default: 'default'
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '130px'
    },
    value: {
      type: [Array, String],
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'name'
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    maxTagCount: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapState('fraMonitoring', [
      'ftmPlaneModelList'
    ]),
    dataSourceF() {
      let d = this.ftmPlaneModelList;
      if (this.dataSource.length > 0) {
        d = this.dataSource;
      }
      return d;
    }
  },

  watch: {
    value(nv, ov) {
      let rv = nv;
      if (this.mode === 'default' && typeof nv === 'object') {
        rv = undefined;
      }
      this.$emit('changeValueHandler', rv);
    }
  },
  methods: {
    changeValueHandler(nv) {
      this.$emit('changeValueHandler', nv);
    },
    changeData() {
      this.$emit('change');
    }
  }

};
</script>

<style>

</style>
